<script lang="ts" setup>
import {watch, ref} from 'vue'
import CustomIconSvg from '@/components/customicon/custom-icon';
import { TABLE_FIELD_TYPE } from '@/constants/indexDevelop'
// import draggable from 'vuedraggable';


const props = defineProps({
    modelItem : {
        type: Object
    },
    isCheck: {
        type: Boolean,
        default: false
    }
})
const {isCheck} = props
const modelLiItem = ref<any>(null)

watch(
    ()=>props.modelItem,
    (val) => {
        modelLiItem.value = val
    },
    {
        immediate: true
    }
)
</script>

<template>

    <div class="drag-li">
        <div class="dis-flex">
            <CustomIconSvg
                class="mt-4"
                :name="TABLE_FIELD_TYPE[modelLiItem?.tableFieldType?.toLocaleUpperCase()]"
                />
            <span class="model-name ml-8">
                <span>{{modelLiItem?.tableFieldName}}</span>
                <span>{{modelLiItem?.tableFieldDesc }}</span>
            </span>
        </div>
        
        <div>
            <span v-show="modelLiItem?.ifPartition" class="ml-8">
                <template v-if="isCheck">
                    <a-tooltip content="分区" >
                        <CustomIconSvg
                            class="mt-6 part-icon"
                            name="icon-metricsx-a-fenqupartition"
                        />
                    </a-tooltip>
                </template>
                <template v-else>
                    <CustomIconSvg
                    class="part-icon mt-4"
                    name="icon-metricsx-a-fenqupartition"
                />
                </template>
            </span>

            <span v-show="modelLiItem?.ifPrimaryKey" class="ml-8">
                <template v-if="isCheck">
                    <a-tooltip content="主键" >
                        <CustomIconSvg
                        class="main-key-icon mt-4"
                        name="icon-metricsx-a-zhujianprimarykey"
                        />
                    </a-tooltip>
                </template>
                <template v-else>
                    <CustomIconSvg
                        class="main-key-icon mt-4"
                        name="icon-metricsx-a-zhujianprimarykey"
                    />
                </template>
                
            </span>
            <span v-show="modelLiItem?.ifBindDimension" class="ml-8">
                <template v-if="isCheck">
                    <a-tooltip content="有关联的维度" >
                        <CustomIconSvg
                            class="dimension-icon mt-4"
                            name="icon-metricsx-a-guanlianAssociation"
                        />
                    </a-tooltip>
                </template>
                <template v-else>
                    <CustomIconSvg
                        class="dimension-icon mt-4"
                        name="icon-metricsx-a-guanlianAssociation"
                    />
                </template>
                
            </span>
            
        </div>
    </div>
</template>
<style lang="scss" scoped>
.drag-li {
    display: flex;
    justify-content: space-between;
    padding:4px;
    margin-bottom: 4px;
}
.model-name {
    display: flex;
    flex-direction: column;
    
}
.part-icon.custom-icon.icon {
    fill: #FF9600;
}
.main-key-icon.custom-icon.icon {
    fill: #24D17E ;
}
.dimension-icon.custom-icon.icon {
    fill: #3C6EFF;
}
.tips-item {
    font-size: 12px;
    &:first-child {
        color: #60646F;
    }
    &:last-child {
        color: #33353B;
    }
}
.conten-tips-wrapper {
    .tips-item {
    font-size: 12px;
    &:first-child {
        color: red;
    }
    &:last-child {
        color: #33353B;
    }
}
}
</style>